<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图管理</title>
		<link rel="stylesheet" href="/adminSite/css/X-ui.css" />
		<link rel="stylesheet" href="/adminSite/css/article-xq.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="/webSite/js/html5.js"></script>
		<![endif]-->
		<style>
		 	img{
		 		width:100%;
		 	}
			.img-box{
				width:200px;
				height:200px;
				overflow:hidden;
				margin-left:20px;
			}
			#upimg{
				margin-top:163px;
				margin-left:20px;
			}
		</style>
	</head>
	<body>
		<div class="pd-20">
			<form class="form x-ui-form">
				<!--标题-->
				<div class="row cl">
					<label class="col-2 form-label">标题</label>
					<div class="col-10">
						<input type="text" name="title" required class="input-text"/>
					</div>
				</div>
				<!--链接-->
				<div class="row cl">
					<label class="col-2 form-label">链接</label>
					<div class="col-10">
						<input type="text" name="url" class="input-text"/>
					</div>
				</div>
				<!--链接-->
				<div class="row cl">
					<label class="col-2 form-label">图片</label>
					<div class="col-10 cl">
						<div class="img-box border f-l">
							<img src="" id="img">
						</div>
						<input type="hidden" id="img-src" required name="imgUrl" />
						<div id="upimg" class="btn btn-default f-l">上传图片</div>
					</div>
				</div>
				<div class="btn btn-submit">提交</div>
			</form>
		</div>
		<script type="text/javascript" src="/adminSite/js/jquery-1.11.0.js" ></script>
		<!--弹窗-->
		<script type="text/javascript" src="/adminSite/js/extend/X-ui-modal/js/X-ui-modal.js" ></script>
		<script type="text/javascript" src="/adminSite/js/H-ui-form.js" ></script>
		<script type="text/javascript" src="/adminSite/js/extend/uploadfile.js" ></script>
		<script>
			$(function(){
				var form = new XuiForm();
				form.verification(".form" , ".btn-submit" , {} , {
					title : {
						empty : "请输入标题"
					},
					imgUrl : {
						empty : "请上传图片"
					}
				} , function(data){
					$.post("/admin/addBanner" , data , function(data){
						if(data.state == "ok"){
							XuiModal().msg("添加成功");
							window.location.href = "/admin/bannerList";
						};
					},"JSON")
				});
				//图片上传
				uploadfile.upload({
					fileBtn : "#upimg",
					url : "/uploadfile",
					type : "banner"
				} , function(data){
					console.log(data);
					$("#img-src").val(data.url);
					$("#img").attr("src" , data.url);
				});
			});
		</script>
	</body>
</html>
